<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/usersLogin.css">
    <link rel="icon" href="${pageContext.request.contextPath}/images/favicon.ico" sizes="32x32" />
    <script src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js"></script>

<%--    表单验证--%>
<%--    @returns {boolean}--%>
<%--    验证用户名和密码是否为空--%>
<%--    考虑到一些无趣的人在登录界面可能不输入用户名或密码就直接提交导致服务器报错，所以在提交表单时进行验证--%>
<%--    write by huxue.--%>
    <script>
        function validateForm() {
            var username = document.querySelector('input[name="a_username"]').value.trim();
            var password = document.querySelector('input[name="a_password"]').value.trim();
            var errorMessage = '';

            if (username === '' || password === '') {
                errorMessage += '用户名或密码不能为空！\n';
            }

            if (errorMessage !== '') {
                alert(errorMessage); // 显示错误信息
                return false; // 阻止表单提交
            }

            return true; // 允许表单提交
        }
    </script>

    <title>前台首页</title>
</head>
<body>

<div class="header">

</div>

<div class="body">
    <div class="panel">
        <div class="top">
            <p>账户登陆</p>
        </div>

        <div class="middle">
            <form action="${pageContext.request.contextPath}/login" method="post" onsubmit="return validateForm()">
                <span style="visibility: hidden;color: red;font-size: 14px;">用户名或密码错误，请重新登录！</span>

                <span class="s1"></span>
                <span class="s2"></span>

                <input type="text" style="text-indent:50px;" name="a_username" value="" class="iputs"/>

                <input type="password" style="text-indent:50px;" name="a_password" value="" class="iputs"/>
                <input type="submit" value="登陆"/>
                <span class="erro">${msg}</span>
            </form>
        </div>
    </div>
</div>

<div class="footer">
    <span>@Copyright © 2019-2020 版权所有 </span>
</div>
</body>
</html>
